<script setup lang="ts">
import CustomTabBar from '@/pages/index/componets/CustomNavbar.vue'
import { computed, ref } from 'vue'
import { Role } from '@/types/enum'
import { onLoad } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore()
const role = computed(() => {
  if (memberStore.profile) {
    return memberStore.profile.roleId
  }
  return Role.Patient
})

onLoad(() => {
  loadSwiperList()
})

const swiperList = ref<string[]>([])

async function loadSwiperList() {
  swiperList.value = [
    'https://sfd-reloaded.oss-cn-hangzhou.aliyuncs.com/banner1.jpg',
    'https://sfd-reloaded.oss-cn-hangzhou.aliyuncs.com/banner2.jpg',
    'https://sfd-reloaded.oss-cn-hangzhou.aliyuncs.com/banner3.jpg'
  ]
}

function navigateTo(url: string) {
  uni.navigateTo({ url })
}
</script>

<template>
  <CustomTabBar />

  <!-- 轮播图区域 -->
  <swiper :indicator-dots="true" :autoplay="true" :interval="6000" :duration="1000" :circular="true">
    <!-- 循环渲染轮播图的 item 项 -->
    <swiper-item v-for="(item, i) in swiperList" :key="i">
      <view class="swiper-item">
        <!-- 动态绑定图片的 url 属性 -->
        <image :src="item"></image>
      </view>
    </swiper-item>
  </swiper>

  <view class="home-button-list" v-if="role === Role.Druggist">
    <navigator url="/pages/druggist/medicine/medicine" class="home-button-item-druggist">
      <view class="iconfont yaopinshangjia">
      </view>
      <view class="icon-text">
        药品上架
      </view>
    </navigator>
    <navigator url="/pages/druggist/doctor/list" class="home-button-item-druggist">
      <view class="iconfont suoyouyisheng">
      </view>
      <view class="icon-text">
        所有医生
      </view>
    </navigator>
    <navigator url="" class="home-button-item-druggist">
      <view class="iconfont yaopinxinxi">
      </view>
      <view class="icon-text">
        药品信息
      </view>
    </navigator>

    <navigator url="" class="home-button-item-druggist">
      <view class="iconfont suoyouhuanzhe">
      </view>
      <view class="icon-text">
        所有患者
      </view>
    </navigator>
    <navigator url="/pages/druggist/prescription/list" class="home-button-item-druggist">
      <view class="iconfont suoyouchufang">
      </view>
      <view class="icon-text">
        所有处方
      </view>
    </navigator>
    <navigator url="" class="home-button-item-druggist">
      <view class="iconfont shoukuanfahuo">
      </view>
      <view class="icon-text">
        收款发货
      </view>
    </navigator>
  </view>

  <view class="home-button-list" v-if="role === Role.Doctor">
    <view @click="navigateTo('/pages/doctor/medicine/list')" class="home-button-item">
      <view class="iconfont yaopinxinxi">
      </view>
      <view class="icon-text">
        所有药品
      </view>
    </view>
    <view @click="navigateTo('/pages/doctor/patient/list')" class="home-button-item">
      <view class="iconfont wodehuanzhe">
      </view>
      <view class="icon-text">
        我的患者
      </view>
    </view>
    <view @click="navigateTo('/pages/doctor/prescription/list')" class="home-button-item">
      <view class="iconfont suoyouchufang">
      </view>
      <view class="icon-text">
        我的处方
      </view>
    </view>
    <view @click="navigateTo('/pages/doctor/income/income')" class="home-button-item">
      <view style="color: #ee9f23;" class="iconfont shouru">
      </view>
      <view class="icon-text">
        收入
      </view>
    </view>
  </view>

  <!-- 患者 -->
  <view class="home-button-list" v-if="role === Role.Patient">
    <view @click="navigateTo('/pages/patient/doctor/list')" class="home-button-item">
      <view style="color: #007AFF;" class="iconfont yisheng1">
      </view>
      <view class="icon-text">
        我的医生
      </view>
    </view>
    <view @click="navigateTo('/pages/patient/prescription/list')" class="home-button-item">
      <view style="color: #018e8d;" class="iconfont chufang">
      </view>
      <view class="icon-text">
        我的处方
      </view>
    </view>

    <view @click="navigateTo('/pages/patient/medicine/list')" class="home-button-item">
      <view style="color: #2d97ff;" class="iconfont chufangyao">
      </view>
      <view class="icon-text">
        药品信息
      </view>
    </view>

    <view @click="navigateTo('/pages/patient/prescription/receipt')" class="home-button-item">
      <view style="color: #ee9f23;" class="iconfont daishouhuo">
      </view>
      <view class="icon-text">
        收货
      </view>
    </view>
  </view>
</template>

<style lang="scss">
swiper {
  height: 400rpx;

  .swiper-item,
  image {
    width: 100%;
    height: 100%;
  }
}

.iconfont {
  font-size: 115rpx;
}

.home-button-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 100rpx 0;

  .home-button-item {
    // background-color: red;
    width: 50%;
    margin: 50rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .home-button-item-druggist {
    // background-color: red;
    width: 30.33%;
    margin: 38rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
